<!DOCTYPE HTML>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<style>
    .fixed-table-body{
        height: calc(73vh);
    }

    .fixed-table-footer{
        border-top: 0;
    }
</style>
<body class="gray-bg">
<div class="container-div">
    <div  id="flexSearchBox"  class="collapse out col-sm-12 search-box">
        <form id="user-form">
            <div class="select-list">
                <ul>
                    <li>
                        name：<input class="reset" type="text" name="headName"/>
                    </li>
                    <li>
                        T Order：<input class="reset" type="text" name="tFileUrl"/>
                    </li>
                    <li>
                        SKU：<input class="reset" type="text" name="sKU"/>
                    </li>
                    <li>
                        FBSSKU：<input class="reset" type="text" name="fBSSKU"/>
                    </li>
                    <li>
                        productName：<input class="reset" type="text" name="productName"/>
                    </li>
                    <li>
                        theChineseName：<input class="reset" type="text" name="chineseName"/>
                    </li>
                    <li class="time">
                        <label>warehousingTime:</label>
                        <input type="text" id="startTime" class="time-input reset"  placeholder="start date" name="beginIntoDate"/>
                        <span>to</span>
                        <input type="text" id="endTime" class="time-input reset"  placeholder="end date" name="endIntoDate"/>
                    </li>
                    <li>
                        <a class="btn btn-success btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;search</a>
                        <a class="btn btn-primary btn-rounded btn-sm reset-booton"><i class="glyphicon glyphicon-repeat"></i>&nbsp;reset</a>
                    </li>
                </ul>
            </div>
        </form>
    </div>

    <div class="btn-group hidden-xs" id="toolbar" role="group">
        <a class="btn btn-outline btn-danger btn-rounded" onclick="$.operate.batRemove()"
           shiro:hasPermission="module:fbsDetail:remove">
            <i class="fa fa-trash-o"></i> delete
        </a>
        <a class="btn btn-outline btn-info btn-rounded flex-botton" data-toggle="collapse" data-target="#flexSearchBox">
            <i class="glyphicon glyphicon-chevron-down">unfoldSearch
            </i>
        </a>
    </div>

    <div class="col-sm-12 select-info table-responsive">
        <table id="bootstrap-table" class="table text-nowrap table-hover" data-height="770" data-mobile-responsive="true"></table>
    </div>
</div>
<div th:include="include :: footer"></div>
<script th:inline="javascript">
    var editFlag = [[${@permission.hasPermi('module:fbsDetail:edit')}]];
    var removeFlag = [[${@permission.hasPermi('module:fbsDetail:remove')}]];
    var prefix = ctx + "module/fbsDetail"

    $(function () {
        var options = {
            url: prefix + "/list",
            createUrl: prefix + "/add",
            updateUrl: prefix + "/edit/{id}",
            removeUrl: prefix + "/remove",
            modalName: "FBS明细",
            showFooter:true,
            columns: [{
                checkbox: true
            },
                {
                    field: 'id',
                    title: '',
                    visible: false

                }, {
                    title: 'serialNumber',
                    align: 'center',
                    formatter: function (value, row, index) {
                        var pageSize = $('#bootstrap-table').bootstrapTable('getOptions').pageSize;     //通过table的#id 得到每页多少条
                        var pageNumber = $('#bootstrap-table').bootstrapTable('getOptions').pageNumber; //通过table的#id 得到当前第几页
                        return pageSize * (pageNumber - 1) + index + 1;    // 返回每条的序号： 每页条数 *（当前页 - 1 ）+ 序号
                    },
                    footerFormatter: function (value) {
                        return 'total';
                    }
                },
                {
                    field: 'headName',
                    align: 'center',
                    sortable: true,
                    title: 'name'
                },
                {
                    field: 'intoDate',
                    align: 'center',
                    sortable: true,
                    title: 'warehousingTime'
                },
                {
                    field: 'tFileUrl',
                    align: 'center',
                    sortable: true,
                    title: '<span class="globalSearch_column">T Order</span>',
                    formatter: function (value, row, index) {
                        return '<a target="view_window" href="/profile/fbs/' + value + '" >' + value + '</a>';
                    }
                },
                {
                    field: 'picUrl',
                    align: 'center',
                    sortable: true,
                    title: 'prcture',
                    formatter: function (value, row, index) {
                        return '<div id="image_links">' +
                            '<a href="/profile/product/' + value + '" title="'+row.productName+'" data-gallery="">' +
                            '<img class="img-rounded" width="60px" height="50px" src="/profile/product/' + value + '"></a>' +
                            '</div>';
                    }
                },
                {
                    field: 'sKU',
                    align: 'center',
                    sortable: true,
                    title: '<span class="globalSearch_column">SKU</span>'
                },
                {
                    field: 'fBSSKU',
                    align: 'center',
                    sortable: true,
                    title: 'FBSSKU'
                },
                {
                    field: 'productName',
                    align: 'center',
                    sortable: true,
                    title: '<span class="globalSearch_column">productName</span>',
                    formatter: function (value, row, index) {
                        return '<div class="popover_productname" data-toggle="popover" data-placement="top" data-content="'+value+'">'+sub_hidden(value)+'</div>';
                    }
                },
                {
                    field: 'quantity',
                    align: 'center',
                    sortable: true,
                    title: 'quantityShipped',
                    footerFormatter: function (value) {
                        return calculateLineTotalAsServer(value,$.table.sumRows.quantity);
                    }
                },
                {
                    field: 'actualQuantity',
                    align: 'center',
                    sortable: true,
                    title: 'realQuantity',
                    footerFormatter: function (value) {
                        return calculateLineTotalAsServer(value,$.table.sumRows.actualQuantity);
                    }
                },
                {
                    field: 'size',
                    align: 'center',
                    sortable: true,
                    title: 'size'
                },
                {
                    field: 'weight',
                    align: 'center',
                    sortable: true,
                    title: 'weight'
                },
                {
                    field: 'model',
                    align: 'center',
                    sortable: true,
                    title: 'model'
                },
                {
                    field: 'uPC',
                    align: 'center',
                    sortable: true,
                    title: 'UPC'
                },
                {
                    field: 'brand',
                    align: 'center',
                    sortable: true,
                    title: 'brand'
                },
                {
                    field: 'chineseName',
                    align: 'center',
                    sortable: true,
                    title: '<span class="globalSearch_column">theChineseName</span>'
                },
                {
                    field: 'bz',
                    align: 'center',
                    sortable: true,
                    title: 'remark'
                },
                ],
            onLoadSuccess: function (item, $element) {

                $('.fixed-table-footer').addClass("totalRowBackground-color");//合计行添加颜色

                initialize_image();
                //初始化提示框方法
                initialize_popover();
            },
        };
        $.table.init(options);
    });
</script>
</body>
</html>